{% extends "base.html" %}

{% block title %}添加退费记录{% endblock %}

{% block styles %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    .select2-container {
        width: 100% !important;
    }
    .nav-tabs .nav-link {
        cursor: pointer;
    }
</style>
{% endblock %}

{% block content %}
<h2 class="mb-4">添加退费记录</h2>

<ul class="nav nav-tabs mb-4" id="refundTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="manual-tab" data-bs-toggle="tab" data-bs-target="#manual" type="button" role="tab" aria-controls="manual" aria-selected="true">
            手动添加
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="batch-tab" data-bs-toggle="tab" data-bs-target="#batch" type="button" role="tab" aria-controls="batch" aria-selected="false">
            批量导入
        </button>
    </li>
</ul>

<div class="tab-content" id="refundTabContent">
    <!-- 手动添加退费记录 -->
    <div class="tab-pane fade show active" id="manual" role="tabpanel" aria-labelledby="manual-tab">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ url_for('add_refund') }}">
                    <div class="mb-3">
                        <label for="registration_id" class="form-label">学生</label>
                        <select class="form-select" id="registration_id" name="registration_id" required>
                            <option value="">请选择学生</option>
                            {% for reg in registrations %}
                            <option value="{{ reg.id }}">{{ reg.name }} - {{ reg.class_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="payment_date" class="form-label">退费日期</label>
                        <input type="date" class="form-control" id="payment_date" name="payment_date" required value="{{ today }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="account" class="form-label">退款账号</label>
                        <select class="form-select" id="account" name="account" required>
                            <option value="">请选择退款账号</option>
                            {% for account in accounts %}
                            <option value="{{ account.account }}">{{ account.account }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="summary" class="form-label">摘要</label>
                        <input type="text" class="form-control" id="summary" name="summary" placeholder="可选">
                    </div>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <label class="form-label">退费项目</label>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>项目</th>
                                        <th>金额</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for project in projects %}
                                    <tr>
                                        <td>
                                            <input type="hidden" name="projects[]" value="{{ project.name }}">
                                            {{ project.name }}
                                        </td>
                                        <td>
                                            <input type="number" class="form-control" name="amounts[]" placeholder="填写退费金额（负数）" step="0.01">
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>退费金额请填写负数，例如退款100元，请填写-100
                    </div>
                    
                    <button type="submit" class="btn btn-primary">保存退费记录</button>
                    <a href="{{ url_for('list_payments') }}" class="btn btn-secondary">返回</a>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 批量导入退费记录 -->
    <div class="tab-pane fade" id="batch" role="tabpanel" aria-labelledby="batch-tab">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ url_for('batch_refund') }}" enctype="multipart/form-data">
                    <div class="mb-4">
                        <h5>批量导入说明</h5>
                        <p>您可以通过上传CSV文件批量添加退费记录。请确保文件格式正确，包含以下列：</p>
                        <ul>
                            <li>学生姓名（必填）</li>
                            <li>班级名称（必填，格式：年级 年度 学期）</li>
                            <li>退费项目（必填）</li>
                            <li>退费金额（必填，使用负数表示退费）</li>
                            <li>退费日期（可选，默认为今天，格式：YYYY-MM-DD）</li>
                            <li>退款账号（可选，默认为第一个账号）</li>
                            <li>摘要（可选）</li>
                        </ul>
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>请先下载CSV模板文件，按照模板格式填写退费信息后上传
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="csv_file" class="form-label">选择CSV文件</label>
                        <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
                        <div class="form-text">支持UTF-8编码的CSV文件，请确保文件格式正确</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="batch_account" class="form-label">默认退款账号</label>
                        <select class="form-select" id="batch_account" name="batch_account">
                            {% for account in accounts %}
                            <option value="{{ account.account }}">{{ account.account }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">当CSV文件中没有指定退款账号时使用此账号</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">CSV模板</label>
                        <div>
                            <a href="{{ url_for('download_refund_template') }}" class="btn btn-primary">
                                <i class="bi bi-download me-1"></i>下载模板
                            </a>
                            <small class="text-muted ms-2">下载CSV模板文件，填写后可批量导入退费记录</small>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>退费金额请填写负数，例如退款100元，请填写-100
                    </div>
                    
                    <button type="submit" class="btn btn-primary">导入退费记录</button>
                    <a href="{{ url_for('list_payments') }}" class="btn btn-secondary">返回</a>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('#registration_id').select2({
        theme: 'bootstrap-5',
        placeholder: '请选择学生'
    });
    
    $('#account').select2({
        theme: 'bootstrap-5',
        placeholder: '请选择退款账号'
    });
    
    $('#batch_account').select2({
        theme: 'bootstrap-5',
        placeholder: '请选择默认退款账号'
    });
    
    // 点击下载模板按钮后，自动切换到批量导入选项卡
    $('a[href="{{ url_for("download_refund_template") }}"]').click(function() {
        setTimeout(function() {
            $('#batch-tab').tab('show');
        }, 500);
    });
});
</script>
{% endblock %} 